//3分钟搭建three场景

//开始
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { TWEEN } from 'three/examples/jsm/libs/tween.module.min';
import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
import {CSS3DObject} from "_three@0.143.0@three/examples/jsm/renderers/CSS3DRenderer";
import $ from 'jquery';
import { loaderModel,fbxLoaderModel} from "./threeLoadModel"
let element = undefined;
let width = undefined;
let height = undefined;
let scene = undefined;
let camera = undefined;
let renderer = undefined;
let controls = undefined;
let mouse = {};
let mouseClick = {};
let mouseClickTime = undefined;
let raycaster = undefined;


//灯光
let ambientLight = undefined;
let textureCube = undefined;
let label3DRender =undefined;
let css3dLable = undefined;

export function initThree(id) {
    //创建从vue页面加载three的入口
    THREE.Cache.enabled = true;
    element = document.getElementById(id);
    width = element.clientWidth;
    height = element.clientHeight;
    createGroup();
    //创建场景
    createScene();
    //创建摄像机
    createCamera();
    // createDaySky();
    //createBox();
    //创建灯光,白色环境光，光照强度为1
    createLight();
    //创建渲染器
    createRenderer();
    createControls();
    skyCube();

    css3DRenderer(width,height,element);
    create3dLable();
    //createbox();
    //loaderModel(scene);
    fbxLoaderModel(scene);

}

function createGroup() {
}

function createScene() {
    scene = new THREE.Scene();
    //scene.background = new THREE.Color(0,0,0);
}
function createCamera() {
    camera = new THREE.PerspectiveCamera(45,width/height,.1,800000);
    camera.position.z = 100;
}

function createLight() {
    ambientLight = new THREE.AmbientLight(0xffffff,1);
    scene.add(ambientLight);
}
function createRenderer() {
    renderer = new THREE.WebGLRenderer({
        precision:'highp',
        alpha:true,
        antialias:true
    });
    renderer.shadowMap.enabled  = true;
    renderer.autoClear = true;
    renderer.outputEncoding = THREE.sRGBEncoding;//調整色彩飽和度
    // renderer.physicallyCorrectLights = false;
    // renderer.toneMappingExposure = 0.1;
    renderer.setSize(width,height);
    element.appendChild(renderer.domElement);
    element.addEventListener('pointermove', mouseMove, false);
    element.addEventListener('pointerup', mouseUp, false);
    element.addEventListener('pointerdown', mouseDown, false);
}
function mouseMove() {
    mouse.x = ((window.event.clientX - element.getBoundingClientRect().left) / element.offsetWidth) * 2 - 1;
    mouse.y = -((window.event.clientY - element.getBoundingClientRect().top) / element.offsetHeight) * 2 + 1;
    document.body.style.cursor = 'default';
    raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);
}
function mouseUp() {
    if (window.event.button == 0) {
        if (window.event.clientX - mouseClick.x <= 10 && window.event.clientY - mouseClick.y <= 10 && Date.now() - mouseClickTime < 150) {
            raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);
        }
    }else if (window.event.button == 2) {
        if (window.event.clientX - mouseClick.x <= 5 && window.event.clientY - mouseClick.y <= 5 && Date.now() - mouseClickTime < 150) {
            raycaster = new THREE.Raycaster();
            raycaster.setFromCamera(mouse, camera);
        }
    }
}
function mouseDown() {
    mouseClick.x = window.event.clientX;
    mouseClick.y = window.event.clientY;
    mouseClickTime = Date.now();
}
function createControls() {
    controls = new OrbitControls(camera,renderer.domElement);
    controls.object.position.set(-33.659,17.708,-114.421);
    controls.target.set(-0.1518,31.673,2.862);
}
//天空盒子
function skyCube() {
    var r = "static/model/skybox/";
    var urls = [ r + "nx.jpg", r + "ny.jpg",
        r + "nz.jpg", r + "px.jpg",
        r + "py.jpg", r + "pz.jpg" ];

    textureCube = new THREE.CubeTextureLoader().load( urls );
    textureCube.format = THREE.RGBFormat;
    textureCube.mapping = THREE.CubeReflectionMapping;
    //scene.background = textureCube;
}
function css3DRenderer(width, height, element) {
    label3DRender = new CSS3DRenderer();
    label3DRender.setSize(width, height);
    label3DRender.domElement.style.position = 'absolute';
    label3DRender.domElement.style.top = '0px';
    label3DRender.domElement.style.pointerEvents = 'none';
    element.appendChild(label3DRender.domElement);
}
function create3dLable() {
    css3dLable = new CSS3DObject($('<div class="labels"></div>')[0]);
    css3dLable.name = "label";
    css3dLable.position.set( 0,100,0);
    css3dLable.scale.set( 5, 5, 5 );
    css3dLable.rotateY( Math.PI );
    css3dLable.visible = false;
    scene.add(css3dLable);
}

function createbox() {
    let mesh = new THREE.Mesh(new THREE.BoxGeometry(10,10,10),new THREE.MeshBasicMaterial({
        color:0xffffff
    }));
    scene.add(mesh)
}
export function render() {
    TWEEN.update();
    controls.update();
    if ( label3DRender ) {
        label3DRender.render(scene, camera);
    }
    renderer.setSize(width,height);
    renderer.render(scene,camera);
    requestAnimationFrame(render);
}
